//
//  XQAnimationOneView.swift
//  XQSwiftUIDemo
//
//  Created by WXQ on 2019/11/15.
//  Copyright © 2019 WXQ. All rights reserved.
//

import SwiftUI

struct XQAnimationOneView: View {
    
    @State var isBlur = false
    @State var isTap = false
    @State var dragGestureTranslation = CGSize.zero
    
    var body: some View {
        ZStack {
            
            VStack {
                HStack {
                    Text("大标题")
                        .font(.largeTitle)
                        .padding(.top)
                        .padding(.leading)
                        .foregroundColor(Color.black)
                    Spacer()
                }
                Spacer()
            }
                .animation(.default)
                .blur(radius: self.isBlur ? 20 : 0)
            
            XQHomeCarView(img: "back2")
                .scaleEffect(0.85)
                .offset(x: self.isTap ? 60 : 0, y: self.isTap ? -200 : -30)
                .rotationEffect(Angle.init(degrees: self.isTap ? 30 : 0))
                .animation(Animation.easeIn(duration: 0.75))
                .offset(self.dragGestureTranslation)
            
            XQHomeCarView(img: "back1")
                .scaleEffect(0.9)
                .offset(x: self.isTap ? 30 : 0, y: self.isTap ? -100 : -15)
                .rotationEffect(Angle.init(degrees: self.isTap ? 20 : 0))
                .animation(Animation.easeIn(duration: 0.5))
                .offset(self.dragGestureTranslation)
            
            XQHomeCarView(img: "back")
                .scaleEffect(0.95)
                .rotationEffect(Angle.init(degrees: self.isTap ? 10 : 0))
                .animation(Animation.easeIn(duration: 0.25))
                .offset(self.dragGestureTranslation)
                .onTapGesture {
                    self.isBlur.toggle()
                    self.isTap.toggle()
                    self.dragGestureTranslation = CGSize.zero
                }
                .gesture(
                    DragGesture()
                        .onChanged({ (value) in
                            self.isBlur = true
                            self.dragGestureTranslation = value.translation
                        })
                        .onEnded({ (value) in
                            self.isBlur = false
                            self.dragGestureTranslation = CGSize.zero
                        })
                )
            
        }
        .navigationBarTitle("首页", displayMode: .inline)
    }
}

struct XQHomeCarView: View {
    
    var img: String = ""
    
    var body: some View {
        ZStack {
            Image(img)
                .resizable()
                .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
            HStack {
                VStack {
                    Text("你好")
                        .foregroundColor(Color.red)
                        .padding(.top)
                        .padding(.leading)
                        .font(.headline)
                        .background(Color.orange)
                    Text("这是一个卡片View")
                        .foregroundColor(Color.blue)
                        .padding(.leading)
                    Spacer()
                }
                Spacer()
                Image(systemName: "car")
                    .background(Color.orange)
            }
            .frame(alignment: .top)
            
        }
        .frame(width: 300, height: 200)
        .background(Color.orange)
        .cornerRadius(10)
        .shadow(radius: 10, x: 10, y: 10)
    }
}

struct XQAnimationOneView_Previews: PreviewProvider {
    static var previews: some View {
        XQAnimationOneView()
    }
}
